<template>
  <div class="reportLossList-box">
    <Hander></Hander>
    <div class="content-box">
      <div class="box-bg">
        <UserHand />
        <van-search
          v-model="fromData.name"
          shape="round"
          show-action
          placeholder="请输入搜索关键词"
          right-icon=""
        >
          <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </van-search>

        <div class="box-content">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getDataList"
          >
            <div v-if="tableList.length > 0">
              <div
                class="content-item"
                v-for="(item, index) in tableList"
                :key="index"
              >
                <!-- <img
                  src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650"
                  alt="用户头像"
                  class="user-avatar"
                /> -->
                <div class="user-info">
                  <div class="user-name">
                    <div>
                      <span style="margin-right: 5px"> {{ item.name }}</span>
                      <van-tag type="primary" v-if="item.status == 'NORMAL'">
                        可用
                      </van-tag>
                      <van-tag type="warning" v-if="item.status == 'DAMAGED'">
                        维修
                      </van-tag>
                      <van-tag color="gray" v-if="item.status == 'OFFLINE'">
                        离线
                      </van-tag>
                    </div>
                    <van-button
                      type="warning"
                      size="mini"
                      v-if="item.status == 'NORMAL'"
                      @click="bxpage(item)"
                      >快速报修</van-button
                    >
                    <!-- <div
                      class="user-status"
                      v-if="item.status == 'NORMAL'"
                      @click="bxpage(item)"
                    >
                      快速报修
                    </div> -->
                  </div>
                  <div class="user-location mt5">{{ item.location }}</div>
                  <!-- <div class="user-charge mt5">收费标准:xxxxxx分钟xxxx金额</div> -->
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";

import Hander from "@/components/hander.vue";
import UserHand from "@/components/userHand.vue";

import { devicesendback } from "@/api/index.js";

const route = useRoute();
const router = useRouter();

//查询设备列表
let fromData = ref({
  page: 1,
  size: 10,
});
let loading = ref(false);
const finished = ref(false);
let tableList = ref([]);
let total = ref(0);

const getDataList = async () => {
  try {
    loading.value = true;
    let res = await devicesendback(fromData.value);
    tableList.value = [...tableList.value, ...res.data.content];
    total.value = res.data.totalElements;

    // 判断是否还有更多数据
    finished.value = tableList.value.length >= total.value;
  } catch (error) {
    finished.value = true; // 出错时也结束加载
  } finally {
    loading.value = false;
  }
};

//搜索
const onClickButton = () => {
  fromData.value.page = 1;
  tableList.value = [];
  getDataList();
};

const bxpage = (item) => {
  router.push({
    path: "/reportLoss",
    query: { id: item.id }, // 传递参数 id=10
  });
};

onMounted(() => {
  getDataList();
});

onUnmounted(() => {});
</script>
<style scoped lang="scss">
.reportLossList-box {
  width: 100%;
  height: 100vh;
  background: #47bc91;
  .content-box {
    width: 100%;
    height: calc(100vh - 120px);
    box-sizing: border-box;
    padding: 0 12px;
    position: relative;
    z-index: 1;

    .box-bg {
      width: 100%;
      background: #ffffff;
      border-radius: 14px;
      height: 100%;

      box-sizing: border-box;
      padding: 0 12px;

      .box-content {
        margin-top: 10px;
        overflow-y: auto;
        height: calc(100% - 256px);
        .content-item {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 10px 15px;
          border: 1px solid #ebebeb;
          border-radius: 14px;
          margin-top: 10px;
          .user-avatar {
            width: 60px;
            height: 60px;
          }

          .user-info {
            margin-left: 5px;
            // width: calc(100% - 60px);
            width: 100%;

            .user-name {
              font-size: 14px;
              color: #000;
              font-weight: bold;

              display: flex;
              align-items: center;
              justify-content: space-between;

              .user-status {
                font-size: 12px;
                color: #47bc91;
              }
            }
            .user-location {
              font-size: 16px;
              color: #000;
              font-weight: bold;
            }

            .user-charge {
              font-size: 14px;
            }

            .mt5 {
              margin-top: 5px;
            }
          }
        }
      }
      .box-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
      }
    }
  }
}
</style>
